import { DatePicker, Input, Button, Space, Form } from 'antd'
import React from 'react'
import "./SearchActivity.less"
const { RangePicker } = DatePicker;

function SearchActivity() {
    const [form] = Form.useForm()
    console.log(form)
    const onFinish = (values) => {
        console.log('Finish:', values);
    };
    const onReset = () => {
        form.resetFields();
    };
    const onOk = (value) => {
        console.log('onOk: ', value);
    }

    return (
        <div className="SearchActivity-box">
            <Space className="SearchActivity-box">
                <Form layout="inline" form={form} onFinish={onFinish}>
                    <Form.Item
                        name="name"
                        label="活动名称：">
                        <Input placeholder='请输入' className='box-leftInput' style={{width:"356px" ,borderRadius:"5px"}}/>
                    </Form.Item>
                    <Form.Item
                        name="time"
                        label="创建时间："
                    >
                        <RangePicker
                            style={{width:"278px" , borderRadius:"5px"}}
                            showTime={{ format: 'HH:mm' }}
                            format="YYYY-MM-DD HH:mm"
                            onOk={onOk}
                            className='box-leftInput'
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button size="middle" className='box-ButtonCancel' onClick={onReset}>取消</Button>
                        <Button className='box-ButtonCancel ok-buttonColoor' htmlType="submit">确定</Button>
                    </Form.Item>
                </Form>

            </Space>
        </div>
    )
}
export default SearchActivity
